<template>
<!--评论组件  -->
    <div id="ClearH">
        <h4>提交评论</h4>
        <textarea v-model="txtContent" placeholder="请输入你要输入的内容..." ></textarea>
        <mt-button type="primary" size="large" @click="postData()">发表</mt-button>
        <h4>评论列表</h4>
        <div v-for="item in msg ">
            <header><span>第一楼</span>&nbsp;&nbsp;用户：<span>{{item.user_name}}</span>&nbsp;&nbsp;发表时间: <span>{{item.add_time | filDate }}</span></header>
            <p>{{item.content}}</p>
        </div>
         <mt-button type="danger" plain size="large" @click="getMore()">加载更多</mt-button>
    </div>
    
</template>

<script>
export default {
    // 向父组件扔出接口
    props:['nowId'],
    data: function() {	
        return {
            msg:[],
            txtContent:'',
            pageIndex:1,
        }
    },
    created(){
        this.getDatas();
    },
    methods: {
        postData: function () {
            const url = this.$myurl.url ;
            if (this.txtContent.trim().length !== 0 ){
                this.$http.post(url + '/api/postcomment/'+this.nowId, {
                content:this.txtContent,
                artid:this.nowId ,
                } , {
                    emulateJSON:true
                }).then( res=>{
                    console.log ( res );
                    if (res.body.status != 0 ) {
                        this.$toast('网络异常');
                        return ;
                    }
                    this.$toast('提交成功');
                    this.txtContent = '';
                });
            }else{
                this.$toast('评论不能为空');
            } 
        },
        getDatas: function () {
            const url = this.$myurl.url;
            this.$http.get(url + '/api/getcomments/' + this.nowId + '?pageindex=' + this.pageIndex ).then(res=>{
                if (res.body.status != 0 ) {
                    this.$toast('未知错误');
                    return ;
                }
                this.msg =  this.msg.concat( res.body.message );
            }) 
        },
        getMore: function　() {
            this.pageIndex ++ ;
            this.getDatas();
        }
    }
}
</script>

<style scoped>
    #ClearH{
        padding: 5px;
    }
    h4{
        padding: 5px;
        border-bottom: 1px solid rgba(0,0,0,.2);
    }
    #ClearH header{
        background: #eee;
        padding-left: 10px;
        font-size: 14px;
    }
    #ClearH p{
        text-align: left;
        padding-left: 10px;
        font-size: 16px;
        margin-top: 10px;
        font-weight: 400;
        color: #000;
    }
</style>